<template>
  <div class="prodectOne">
    <h1>我是ProductOne</h1>
    <ul>
      <li v-for="(product, index) of setProducts" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="price">{{product.price}}</span>
      </li>
    </ul>
    <button type="button" @click="reducePrice(4)">商品降价</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
export default {
  name: 'ProdultOne',
  data () {
    return {}
  },
  computed: {
    // product () {
    //   return this.$store.state.product
    // }
    ...mapState(['products']),
    ...mapGetters(['setProducts'])
  },
  methods: {
    // reduceProduct () {
    //   let products = this.$store.state.products
    //   products.forEach((product) => { // 遍历数组
    //     console.log(product)
    //     product.price -= 10
    //   })
    // }
    // ...mapMutations(['reducePrice']) // 同步Mutations
    // ...mapActions(['reducePrice']) // 异步Actions
    reducePrice (payload) {
      this.$store.dispatch('reducePrice', payload)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .prodectOne
    margin-bottom 30px
    padding: 10px 20px
    background lavenderblush
  ul
    padding 0
    list-style none
    display flex
    li
      margin-right 10px
      margin-top 10px
      padding 20px
      background-color: #D1E4FF
      .price
        font-weight 600
        color #860CEB
        display block
</style>
